<template>
  <div class="list">
    <h2>猜你喜欢</h2>
    <ul>
        <li v-for="(item,index) in list" :key="index" @click="change(index)" :class="{active:changeColor==index}">
            {{item}}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:["综合排序","距离最近","销量最高","筛选"],
            changeColor:0
        }
    },
    methods:{
        change(index){
           this.changeColor = index; 

        }
    }

    
}
</script>

<style lang="scss" scoped>
h2{
    margin-left: 5px;
}
ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin-top:5px ;
    margin-bottom: 20px;
}
.active{
    color: skyblue;
    font-size: 18px;
}

</style>